<template>
    <div class="alert-dialog ">
        <Cdialog :visible="showoneClick" @closeDialog="changeVisible" :title="props.dialogTitle" width="420">
            <div class="control-group">
                <div class="eqName fs16">
                    是否进行<span class="text fs16">{{ props.item.title }}</span>操作？
                </div>
            </div>
            <div class="buttton-group">
                <div class="button-item">
                    <el-button round type="primary" @click="oneClick">确认</el-button>
                </div>
                <div class="button-item">
                    <el-button round type="info" @click="changeVisible">取消</el-button>
                </div>
            </div>
        </Cdialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, defineProps, toRefs, watch, defineEmits } from 'vue'
import { useEqDetailStore } from '../../stores/eqInfo'
import { ElMessage } from 'element-plus'
import { executeGatewayControl } from "@/api/equipment"
const emits = defineEmits(['closeDialog'])
const props = defineProps({
    dialogTitle: {
        type: String,
        default: () => '按钮标题'
    },
    item: {
        type: Object,
        default: () => [
            { title: '', controlId: '', eid: '' }
        ]
    },
    showDialog: {
        type: Boolean,
        default: () => false
    }
})
const EqDetailStore = useEqDetailStore()
const { showDialog } = toRefs(props)
const showoneClick = ref(false)
watch(
    showDialog,
    newVal => {

        showoneClick.value = newVal
    },
    { immediate: true }
)
const changeVisible = (v: any) => {
    emits('closeDialog', false)
}
const eqName: any = computed(() => {
    return EqDetailStore.$state.eqName
})

const eqValue = computed(() => {
    return EqDetailStore.$state.infoItem
})
const handleMessage = ref('')
const oneClick = () => {
    let cid = props.item.controlId
    let obj = {}
    obj['state'] = props.item.state
    executeGatewayControl(cid, { controlId: props.item.controlId, equipmentId: props.item.eid, execParams: obj }).then((res) => {


    })
}
</script>

<style scoped lang="scss">
.control-group {


    .control-item {
        padding: 8px;
        border-radius: 4px;
        margin-bottom: 8px;

        &:hover {
            border-color: var(--theme-blue-color);
        }

        .control-item-header {
            // display: flex;
            // align-items: center;
            // justify-content: space-between;

            .control-item-title {
                font-size: 16px;
            }
        }

        .control-item-form {
            margin-top: 14px;
        }
    }
}

.buttton-group {
    display: flex;
    justify-content: right;

    .button-item {
        margin-right: 15px;
    }
}

.text {
    color: rgba(111, 186, 255, 1);
}

.eqName {
    margin-bottom: 8px;
    padding: 8px;
    box-sizing: border-box;
}

:deep(.el-input__wrapper) {
    background-color: rgba(27, 68, 148, 0.46) !important;
    border: 0 !important;
    box-shadow: none
}

:deep(.el-input__inner) {
    color: white !important;
    border: 0 !important;
}

:deep(.el-input) {
    color: black !important;
    border: 0 !important;

    .el-input__password {
        display: none;
    }
}
</style>